<template>
	<view class="container">
		<view class="header">
			<!-- 区域代理 -->
			<image :src="agencyConfig.logo" mode=""></image>
			<!-- <view class="pos"> -->
			<!-- 填充背景色 -->
			<!-- </view> -->
		</view>
		<view class="content" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]" @touchstart="coverTouchstart"
		 @touchmove="coverTouchmove" @touchend="coverTouchend">
			<u-form>
				<u-form-item label="姓名">
					<u-input maxlength="16" placeholderStyle="color:rgba(0,0,0,.6)" placeholder="请输入姓名" v-model="form.name" />
				</u-form-item>
				<u-form-item label="手机号">
					<u-input type="number" placeholderStyle="color:rgba(0,0,0,.6)" placeholder="请输入手机号" v-model="form.phone" maxlength="11" />
				</u-form-item>
				<!-- 				<u-form-item label="微信号">
					<u-input type="number" placeholderStyle="color:rgba(0,0,0,.6)" placeholder="请输入微信号" v-model="form.weixin" />
				</u-form-item> -->
				<u-form-item label="代理类型">
					<u-radio-group v-model="radio" @change="radioGroupChange">
						<u-radio v-model="item.check" active-color="success" v-for="(item, index) in radioList" :key="index" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<view @tap="showChange">
					<u-form-item label="代理地区">
						<view class="u-demo-result-line">
							<text style="color:rgba(0,0,0,.6)" v-if="!input">请选择地区</text>
							<text v-else>{{input}}</text>
						</view>
					</u-form-item>
				</view>
				<view class="val">
					<view class="left">
						<u-checkbox size="28" active-color="success" v-model="valChecked"></u-checkbox>
					</view>
					<view class="right">
						我已经阅读并了解了 <text @tap="agree">【区域代理申请协议】</text>
					</view>
				</view>
			</u-form>
			<view class="submit-btn" @tap="submit">申请代理</view>
		</view>
		<city-select :name="chooseType" v-model="value" @city-change="cityChange"></city-select>
	</view>
</template>
<script>
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	import citySelect from '../../components/u-city-select.vue'
	import service from '@/store/service.js';
	export default {
		data() {
			return {
				valChecked: false,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				form: {
					name: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					weixin: ''
				},
				radioList: [{
						name: '区级'
					},
					{
						name: '市级',
					},
					{
						name: '省级',
					}
				],
				radio: '市级代理',
				switchVal: false,
				value: false,
				input: '',
				province: '',
				city: '',
				county: '',
				agency: '',
				isOpen: 1,
				agencyConfig: {},
				id: '',
				isHasRecord: false,
				chooseType: '', //选择代理类型
			};
		},
		components: {
			citySelect
		},
		methods: {
			getApplyInfo() {
				this.$http.post(service.api.profile.getApplyInfo).then(res => {
					if (res.data == null) {
						this.isHasRecord = false
					} else {
						this.isHasRecord = true
					}
				})
			},
			agree() {
				uni.navigateTo({
					url: './agree'
				})
			},
			radioGroupChange(e) {
				e == '市级' ? (this.agency = 2) : e == '省级' ? (this.agency = 1) : (this.agency = 3)
				e == '市级' ? (this.chooseType = 2) : e == '省级' ? (this.chooseType = 1) : (this.chooseType = 3)
				console.log(this.agency, 'agency');
			},
			cityChange(e) {
				this.input = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				this.province = e.province.label
				this.city = e.city.label
				this.county = e.area.label
				console.log(e, 'eeeeee');
			},
			showChange() {
				if (this.agency == '') {
					this.$api.msg('请选择代理类型！')
					return
				}
				this.value = !this.value
			},
			submit() {
				if (this.isOpen != 1) {
					this.$api.msg('暂未开启申请权限！')
					return
				}
				if (this.form.name.trim() == '') {
					this.$api.msg('请输入姓名！')
					return
				}
				if (this.form.phone.trim() == '') {
					this.$api.msg('请输入手机号！')
					return
				}
				if (/^1[3456789]\d{9}$/.test(this.form.phone) == false) {
					this.$api.msg('手机号格式不正确！')
					return
				}
				if (this.agency == '') {
					this.$api.msg('请选择代理类型！')
					return
				}
				if (this.input.trim() == '') {
					this.$api.msg('请选择地区！')
					return
				}
				if (this.valChecked == false) {
					this.$api.msg('请勾选申请协议！')
					return
				}
				this.$http.post(service.api.profile.agentApply, {
					name: this.form.name,
					phone: this.form.phone,
					province: this.province,
					city: this.city,
					area: this.county,
					type: this.agency
				}).then(res => {
					if (res.code === 1) {
						this.$api.msg(res.info)
					} else {
						this.$api.msg(res.info)
					}

				})
			},
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 40 && moveDistance < 80) {
					moveDistance = 20;
				}

				if (moveDistance > 0 && moveDistance <= 40) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			// 获取代理设置数据
			getAgencySetting() {
				this.$http.post(service.api.profile.getConfig).then(res => {
					console.log(res, 'setting');
					if (res.code === 1) {
						this.agencyConfig = res.data
					}
					console.log(this.agencyConfig, 'agengcy');
				})
			},
		},
		onLoad() {
			this.getApplyInfo()
			this.getAgencySetting()
			this.id = uni.getStorageSync('login').id
		},
		onNavigationBarButtonTap(e) {
			if (this.isHasRecord) {
				uni.navigateTo({
					url: './applyInfo'
				})
			} else {
				this.$api.msg('暂无记录！')
			}
		}
	}
</script>

<style lang="less">
	.container {
		.val {
			height: 110rpx;
			width: 670rpx;
			// border-bottom: 1px solid #939AA3;
			box-sizing: border-box;
			padding: 10px 0;
			font-size: 14px;
			line-height: 35px;
			display: flex;
			align-items: center;

			.right {
				text {
					color: #337AB7;
					font-size: 30rpx;
				}
			}
		}

		/deep/ .u-form-item--left {
			width: 150rpx !important;
			margin-right: 10rpx !important;
			white-space: nowrap !important;
		}

		// /deep/ .u-radio__icon-wrap--checked {
		// 	background-color: #FF9900 !important;
		// }

		.header {
			padding: 20rpx;
			height: 250rpx;
			width: 100%;
			background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(10, 13, 24, 0.7147233893557423) 36%, rgba(0, 212, 255, 1) 100%);
			text-align: center;
			line-height: 200rpx;
			font-size: 48rpx;
			font-weight: 600;
			letter-spacing: 20rpx;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			position: relative;
			z-index: 1;

			>image {
				height: 100%;
				width: 100%;
			}

			.pos {
				height: 200rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(238, 78, 173, 0.7147233893557423) 30%, rgba(0, 212, 255, 1) 100%);
				opacity: .2;
			}
		}

		.content {
			width: 710rpx;
			background: #FFFFFF;

			position: absolute;
			top: 260rpx;
			left: 22rpx;
			transform: translateX(-50%);
			z-index: 9;
			border-radius: 15rpx;
			padding: 0 20rpx;
			height: calc(100vh - 350rpx);

			.submit-btn {
				// background: linear-gradient(90deg, #F8124A 0%, rgba(255, 123, 76, 1) 100%);
				background-color: #F8124A;
				border-radius: 10upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx auto 180rpx;
				height: 88rpx;
				font-size: 36rpx;
			}
		}
	}
</style>
